<template>
  <div class="container">
     <div class="titles">
       <h1>ONLINE</h1>
       <h1>PUBLISHING</h1>
       <h1>供应链需求<span>在线发布</span></h1>
       <div class="area1"><span>24小时</span>内电话沟通&emsp;<span>3天</span>内免费匹配优质供应链</div>
       <br>
       <a-row class="area2" type="flex" >
         <a-col class="text"><a-icon type="check-circle" />产品设计</a-col>
         <a-col class="text"><a-icon type="check-circle" />结构设计</a-col>
         <a-col class="text"><a-icon type="check-circle" />制造生产全流程打通</a-col>
       </a-row>
     </div>

      <div class="box">
        <a-row type="flex" justify="space-between">
          <a-col class="col">
            <div class="inner-box">
              海量
            </div>
            <span>此处是具体的文字</span>
          </a-col>
          <span class="line"></span>
          <a-col class="col">
            <div class="inner-box">
              专业
            </div>
            <span>此处是具体的文字</span>
          </a-col>
          <span class="line"></span>
          <a-col class="col">
            <div class="inner-box">
              快速
            </div>
            <span>此处是具体的文字</span>
          </a-col>
          <span class="line"></span>
          <a-col class="col">
            <div class="inner-box">
              高效
            </div>
            <span>此处是具体的文字</span>
          </a-col>
        </a-row>
      </div>

    </div>
</template>

<script>


  export default {
    name: "Banner.vue"
  }
</script>

<style scoped>
  .container{
    width: 100%;
    position: relative;
    background: url("../../assets/bg1.png") no-repeat;
    background-size: cover;
    padding-bottom: 60px;
  }
  .cover{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }
  .container h1:nth-child(1){
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding-left: 40px;
    margin-bottom: 3px;
  }
  .container h1:nth-child(2){
    color: #fff;
    font-weight: 400;
    text-align: left;
    font-size: 24px;
    padding-left: 40px;
    margin-bottom: 3px;
  }
  .container h1:nth-child(3){
    color: #fff;
    font-weight: 600;
    text-align: left;
    font-size: 27px;
    padding-left: 40px;
    margin-bottom: 3px;
  }
  .container h1:nth-child(3) span{
    font-weight: 400;
  }
  .area1{
    display: block;
    margin-left: 40px;
    border-radius: 14px;
    padding: 4px;
    color: #1890ff;
    font-weight: 400;
    text-align: left;
    font-size: 12px;
    /* padding-left: 40px; */
    margin-bottom: 3px;
    background: aqua;
    width: fit-content;
  }
  .area1 span{
    font-weight: 600;
  }
  .area2{
    margin-left: 40px;
    margin-top: 5px;
    width: fit-content;
  }
  .area2 .text{
    color: #fff;
    font-weight: 400;
    text-align: left;
    font-size: 14px;
    margin-right: 5px;
  }

  .titles{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .box{
    width: 80%;
    background: #fff;
    border-radius: 5px;
    margin: 0 auto;
    padding: 10px 20px;
  }
  .box .inner-box{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background: cornflowerblue;
    color: #fff;
    line-height: 60px;
    font-size: 20px;
  }
  .box .col .inner-box,span{
    display: inline-block;
  }
  .box .col span{
    margin-left: 20px;
    color: #000;
    font-family: "微软雅黑", Arial;
  }
  .line{
    width: 1px;
    height: 50px;
    border-radius: 1px;
    background: darkgrey;
    margin: auto 0;
  }
</style>